<template>
  <div class="goodslist">
    <!-- 顶部导航 -->
    <navbar />
    <!-- 分类选项卡 -->
    <van-tabs v-model="active">
      <!-- 添加第一张卡片 -->
      <van-tab title="生日蛋糕" name="cakelist" />
      <van-tab title="提货卡券" name="cardlist" />
      <van-tab title="商家入驻" name="joinus" />
    </van-tabs>
    <router-view />
    <!-- 底部 -->
    <tabbar />
  </div>
</template>

<script>
import Navbar from "../components/Navbar.vue";
import Tabbar from "../components/Tabbar.vue";
export default {
  components: { Navbar, Tabbar },
  data() {
    return {
      active: "cakelist",
    };
  },
  watch: {
    active(newValue) {
      if (newValue != this.$route.path.split("/")[2]) {
        this.$router.push(`/goodslist/${this.active}`);
      }
    },
  },
  mounted() {
    this.active = this.$route.path.split("/")[2];
  },
};
</script>

<style scoped></style>
